<template>
  <div>
    <topBar></topBar>
    <div class="container my-5">
      <div class="row p-4 pb-0 pe-lg-0 pt-lg-5 shadow-lg">
        <div class="row">
          <div class="col-2">
            <router-link
              :to="{ path: '/governmentHangqing' }"
              class="btn btn-primary"
              >返回</router-link
            >
          </div>
        </div>
        <h4 class="text-primary">查询结果</h4>
        <h2 class="align-center">{{ date }}价格行情</h2>
        <table class="table">
          <thead class="table-success">
            <tr>
              <th scope="col">#</th>
              <th scope="col">种类</th>
              <th scope="col">名称</th>
              <th scope="col">价格</th>
              <th scope="col">产地</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="index in range(start, end)" :key="index">
              <td>{{ index + 1 }}</td>
              <td>{{ cate }}</td>
              <td>{{ cateName[index] }}</td>
              <td>{{ price[index] }}￥</td>
              <td>{{ origin }}</td>
            </tr>
          </tbody>
        </table>
        <div class="row">
          <div class="col-lg-5"></div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageReduce()">
                上一页
              </button>
            </h5>
          </div>
          <div class="col-lg-1">
            <h5>
              <button class="badge bg-secondary" v-on:click="pageAdd()">
                下一页
              </button>
            </h5>
          </div>
          <div class="col-lg-5"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import topBar from "@/components/government/topBar";
export default {
  data() {
    return {
      cate: "",
      origin: "",
      date: "",
      data: [],
      cateName: [],
      price: [],
      start: 0,
      end: 0,
      begin: 0,
      part: 0,
      pageNum: 5,
    };
  },
  mounted() {
    this.cate = this.$route.query.cate;
    this.origin = this.$route.query.origin;
    this.date = this.$route.query.date;

    var body = {
      code: 0,
      msg: "success",
      data: {
        name: "getByDateOriginSpecies",
        result: [
          {
            marketDate: "2021-07-15",
            cateName: "桃",
            origin: "山东",
            originAvgPrice: "0.97",
            originPriceChange: "(上涨1.04%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "李子",
            origin: "山东",
            originAvgPrice: "0.83",
            originPriceChange: "(下降10.75%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "苹果",
            origin: "山东",
            originAvgPrice: "0.58",
            originPriceChange: "",
          },
          {
            marketDate: "2021-07-15",
            cateName: "梨",
            origin: "山东",
            originAvgPrice: "1.01",
            originPriceChange: "(下降2.88%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "鲜枣",
            origin: "山东",
            originAvgPrice: "1.43",
            originPriceChange: "(下降0.69%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "樱桃",
            origin: "山东",
            originAvgPrice: "5.17",
            originPriceChange: "(上涨8.15%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "杏",
            origin: "山东",
            originAvgPrice: "0.42",
            originPriceChange: "(下降19.23%)",
          },
          {
            marketDate: "2021-07-15",
            cateName: "石榴",
            origin: "山东",
            originAvgPrice: "4",
            originPriceChange: "(上涨4.43%)",
          },
        ],
      },
    };
    this.data = body.data.result;
    for (var i = 0; i < this.data.length; i++) {
      this.cateName.push(this.data[i].cateName);
      this.price.push(this.data[i].originAvgPrice);
    }
    this.part = Math.floor(this.data.length / this.pageNum);
    if (this.part == 0) {
      this.end = this.data.length;
    } else {
      this.end = this.pageNum;
    }
  },
  components: {
    topBar: topBar,
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
    pageAdd() {
      var gap = this.data.length - this.end;
      if (gap >= this.pageNum) {
        this.start += this.pageNum;
        this.end += this.pageNum;
      } else if (this.end != this.data.length) {
        this.start += this.pageNum;
        this.end = this.data.length;
      }
    },
    pageReduce() {
      if (this.end == this.data.length) {
        this.start -= this.pageNum;
        this.end = this.part * this.pageNum;
      } else if (this.start != 0) {
        this.start -= this.pageNum;
        this.end -= this.pageNum;
      }
    },
  },
};
</script>

<style scoped>
.align-center {
  text-align: center;
}
header {
  background-color: #2c7d72;
}
</style>